<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="boxs">
			<u-input trim v-model="text_content" type="textarea" maxlength="200" :border="false" height="200"
				placeholder="请输入你想发布的内容..." :auto-height="true" class="contentsinput" placeholderStyle="color:#CBCBCB"
				:clearable="false" />
			<text class="numbers">{{text_content.length}}/200</text>

			<view class="masks" v-if="maskClick" @click="maskclose"></view>
			<view class="boxoneline">
				<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
					themeColor="#007AFF" @onCancel='onCancel'></simple-address>
				<view style="width: 100%;">
					<view class="flex_bet_align" @tap="openAddres">
						<view class="boxoneleft">
							<image src="/static/img/dw.png" mode="widthFix" class="dw" style="width: 26rpx;"></image>
							<text v-if="!address[0]">请选择供货地区</text>
							<text class="clamp1" style="max-width: 560rpx;" v-if="address[0]">
								{{address[0]}} {{address[1]}} {{address[2]}}</text>
						</view>
						<u-icon name="arrow-right" color="#A2A2A2" size="28"></u-icon>
					</view>
				</view>
			</view>
			<navigator :url="'/home/submit/contactshops?id='+relevance.id+'&name='+relevance.name" hover-class="none"
				class="boxoneline">
				<view class="boxoneleft">
					<image src="/static/img/gl.png" mode="widthFix" class="gl"></image>
					<text v-if="!relevance.id">关联供应货品</text>
					<text v-else class="clamp1" style="max-width: 560rpx;">{{relevance.name}}</text>
				</view>
				<u-icon name="arrow-right" color="#A2A2A2" size="28"></u-icon>
			</navigator>
			<view class="boxoneline">
				<view class="boxoneleft" v-if="subsectionval==0">
					<image src="/static/img/jpg.png" mode="widthFix" class="jpg"></image>
					<view class="imgnumbers">上传图片<text>({{images.length}}/6)</text></view>
				</view>
				<view class="boxoneleft" v-if="subsectionval==1">
					<u-icon name="play-circle-fill" color="#444444" size="38"></u-icon>
					<view class="imgnumbers">上传视频 </view>　
					<u-button v-if="video" size="mini" shape="circle" type="success" throttle-time="1000"
						@click="uploadvideo">重新选择</u-button>
				</view>
				<u-subsection size="mini" style="width: 40%;" :list="[{name:'图片'},{name:'视频'}]" :current="subsectionval"
					button-color="#38BE8C" active-color="#FFFFFF" @change="setsubsection" v-if="cometype==0">
				</u-subsection>
			</view>
			<block v-if="subsectionval==0">
				<view class="photos">
					<view class="photobox">
						<!-- :auto-upload="false" -->
						<u-upload ref="upload" max-size="12328959" :action="action" width="210" height="210"
							max-count="6" :file-list="echoimages" @on-remove="removeimg" @on-uploaded="uploaded"
							:auto-upload="false">
						</u-upload>
					</view>
				</view>
			</block>
			<block v-if="subsectionval==1">
				<view class="photos">
					<view class="photobox">
						<!-- <view class="" style="padding: 0 16rpx 28rpx;color: red;" v-if="videoTit">*视频时长建议不超过15秒</view> -->
						<u-row gutter="16">
							<video class="video" :src="video" id="myVideo" v-if="video" @timeupdate='timeupdate'
								:autoplay="true"></video>
							<u-col span="12" v-if="!video" @click="uploadvideo">
								<view class="imgupdata">
									<image src="../../static/img/xj.png" mode="widthFix"></image>
									<view class="text">选择视频</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</block>
		</view>
		<view class="submitbox">
			<view class="submittext">确认发布则表示赞同<text @click="torich('社区协议',8)">《社区发布协议》</text></view>
			<view class="sbumitbtn" @click="submit">{{supply_type==1?'确认发布':'确认修改'}}</view>
		</view>

		<!-- <view class="mask" v-if="successwindow">
			<view class="maskcontent">
				<text class="masktitle">发布成功</text>
				<view class="maskmetions">请前往 个人中心-我的苗店 查看发布内容！</view>
				<view class="submitgo" @click="successwindow=false">继续发布</view>
				<navigator url="" hover-class="none" class="tomiao">前往苗店</navigator>
			</view>
			<u-icon name="close-circle" color="#fff" size="60" @click="successwindow=false"></u-icon>
		</view> -->
	</view>
</template>

<script>
	import amapFile from "../../static/js/amap-wx.js"
	import App from '@/App.vue';
	var _this;
	export default {
		data() {
			return {
				settingdata: {
					name: '发布动态',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "submit"
				},
				value: '',
				images: [],
				// 回显的img
				echoimages: [],
				// 地址
				address: [],
				//url
				action: "",
				// 内容
				text_content: "",
				lon: 0,
				lat: 0,
				//视频上传
				video: "",
				//视频显示与隐藏
				videoshow: "",
				// 后台需要的视屏地址
				videourl: "",
				//上传类型
				subsectionval: 0,
				// 关联的商品
				relevance: {},
				cityPickerValueDefault: [0, 0, 1],

				maskClick: false, //遮罩层
				videoGet: true, //视频大小
				videoContext: {}, //视频
				durationTime: -0.001,

				first_play: true,
				videoTit: false,
				supply_type: 1,
				supply_type_id: '',
				cometype: 0, //0代表动态发布页,1代表是短视频管理点编辑进入次页面
			}
		},
		onLoad(e) {
			_this = this
			_this.action = _this.$api.getbase() + 'fileupload'

			console.log(e)
			if (e.id) {
				_this.getinfo(e.id)
			}
			if (e.cometype) {
				_this.cometype = 1
			}
			_this.getcity()
		},
		onShow() {
			if (wx.getStorageSync("relevance")) {
				_this.relevance = wx.getStorageSync("relevance")
				wx.removeStorageSync("relevance")
			}
		},
		methods: {
			getinfo(id) {
				_this.$api.get("communitydetail", {
					uid: uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : 0,
					id: id,
				}).then(res => {
					console.log(res)
					_this.text_content = res.content
					_this.address = res.city.split(',')
					_this.subsectionval = parseInt(res.type) - 1

					if (res.type == 1) {
						_this.images = res.images_
						let arr = []
						for (let obj of res.images) {
							arr.push({
								url: obj
							})
						}
						_this.echoimages = arr
					} else {
						_this.video = res.video[0]
						_this.videourl = res.video_[0]
					}
					if (res.recd_goods.length > 0) {
						_this.relevance.id = res.recd_goods[0].id
						_this.relevance.name = res.recd_goods[0].title
					}
					_this.supply_type = 2
					_this.supply_type_id = res.id

				});
			},

			torich: function(name, type) {
				uni.navigateTo({
					url: "/home/login/reading?name=" + name + "&type=" + type
				})
			},

			// 获取当前位置
			getcity() {
				new amapFile.AMapWX({
					key: App.mapkey
				}).getRegeo({
					success: function(data) {
						let address = data[0].regeocodeData.addressComponent
						let location = address.streetNumber.location.split(',')
						_this.lat = location[1]
						_this.lon = location[0]
						if (_this.supply_type == 1) {
							_this.address = [address.province, address.city, address.district]
						}
						console.log(location, _this.address)
					}
				})
			},

			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},

			// 切换城市
			openAddres() {
				_this.maskClick = true
				_this.$refs.simpleAddress.open();
				if (_this.video != '') {
					_this.video = ''
				}

			},

			//关闭蒙层
			maskclose() {
				_this.maskClick = false
			},
			onCancel() {
				_this.maskClick = false
				if (_this.video == '' && _this.videoshow != '') {
					_this.video = _this.videoshow
				}

			},

			// 确认地址
			onConfirm(e) {
				_this.address = e.label.split('-');
				_this.maskClick = false
				if (_this.video == '' && _this.videoshow != '') {
					_this.video = _this.videoshow
				}
			},

			// 删除图片
			removeimg(e) {
				_this.images.splice(e, 1)
			},

			// 视频上传
			uploadvideo() {
				_this.$plug.uploadvideo(_this.action, function(data) {
					console.log(data)
					if (data != null) {
						uni.showToast({
							title: '上传成功',
							icon: "none"
						})
						_this.video = data.fullurl
						_this.videoshow = data.fullurl
						_this.videourl = data.url
					} else {
						uni.showToast({
							title: '请上传15秒以内的视频',
							icon: "none"
						})
						_this.videoTit = true
					}


				})
			},

			// 视频时长
			timeupdate(e) {
				// 播放进度改变
				if (_this.first_play && e.detail.duration > 0) {
					_this.first_play = false
					_this.durationTime = parseInt(e.detail.duration);
					console.log('视频总时长', _this.durationTime)

					if (_this.durationTime > 9) {
						_this.videoTit = true
					} else {
						_this.videoTit = false
					}
				}
			},

			// 设置上传类型
			setsubsection(e) {
				_this.subsectionval = e
			},

			// 请求新的地址地址
			getSetting() {
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							uni.showModal({
								content: '检测到您没打开定位权限，是否去设置打开？',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										uni.openSetting()
									}
								},
							});
						} else {

							if (_this.lat == 0) {
								_this.getcity()
							}
						}
					}
				})
			},

			// 上传成功
			uploaded(e) {
				_this.images = []
				e.forEach((item, index) => {
					if (item.response) {
						if (item.response.code == 1) {
							_this.images.push(item.response.data.url)
						} else {
							_this.$refs['upload'].remove(index)
						}
					}
				})
				console.log(_this.images, 'uploaded')

				if (_this.text_content.length > 1 || _this.images.length > 0 || _this.videourl.length > 0) {
					let subdata = {
						text_content: _this.text_content,
						text_city: _this.address.join(','),
						lon: _this.lon,
						lat: _this.lat,
						text_type: parseInt(_this.subsectionval) + 1,
						is_agreement: 1,
						goods_id: _this.relevance.id ? _this.relevance.id : "",
						supply_type: _this.supply_type,
						images: _this.images
					}
					if (_this.supply_type == 2) {
						subdata.id = _this.supply_type_id
					}
					console.log(subdata);
					_this.$api.post("sendcommunity", subdata).then(data => {
						wx.showToast({
							title: _this.supply_type == 1 ? "发布成功" : "修改成功"
						})
						let Pages = getCurrentPages();
						let prevPage = Pages[Pages.length - 2]
						prevPage.$vm.isonshow = true

						setTimeout(function() {
							wx.navigateBack({
								delta: 1
							})
						}, 1000);
					});
				} else {
					wx.showToast({
						title: "请填写内容、图片或视频",
						icon: "none"
					})
				}
			},
			// 提交
			submit() {
				_this.click_shake(function() {
					if (_this.subsectionval == 0) {
						_this.$refs.upload.upload();
					} else {
						if (_this.text_content.length > 1 || _this.images.length > 0 || _this.videourl.length > 0) {
							let subdata = {
								text_content: _this.text_content,
								text_city: _this.address.join(','),
								lon: _this.lon,
								lat: _this.lat,
								text_type: parseInt(_this.subsectionval) + 1,
								is_agreement: 1,
								goods_id: _this.relevance.id ? _this.relevance.id : "",
								supply_type: _this.supply_type,
								video: _this.videourl
							}

							if (_this.supply_type == 2) {
								subdata.id = _this.supply_type_id
							}

							console.log(subdata);
							_this.$api.post("sendcommunity", subdata).then(data => {
								wx.showToast({
									title: _this.supply_type == 1 ? "发布成功" : "修改成功"
								})
								let Pages = getCurrentPages();
								let prevPage = Pages[Pages.length - 2]
								prevPage.$vm.isonshow = true

								setTimeout(function() {
									wx.navigateBack({
										delta: 1
									})
								}, 1000);
							});
						} else {
							wx.showToast({
								title: "请填写内容、图片或视频",
								icon: "none"
							})
						}
					}

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.boxs {
		margin: 0 25rpx;
		display: flex;
		flex-direction: column;
		border: #fff;
		padding-bottom: 280rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 280rpx);

		.masks {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba($color: #000000, $alpha: 0.5);
			z-index: 99;
		}

		.contentsinput {
			padding: 24rpx;
			color: #333333;
			font-size: 28rpx;
		}

		.numbers {
			color: #999999;
			font-size: 20rpx;
			text-align: right;
			margin-right: 33rpx;
			padding-bottom: 31rpx;
		}

		.boxoneline {
			padding: 33rpx 16rpx 42rpx 23rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid #E6E6E6;

			.boxoneleft {
				display: flex;
				flex-direction: row;
				align-items: center;

				.dw {
					width: 26rpx;
					height: auto;
				}

				.gl {
					width: 33rpx;
					height: auto;
				}

				.jpg {
					width: 30rpx;
					height: auto;
				}

				text {
					margin-left: 25rpx;
					color: #333333;
					font-size: 28rpx;
				}

				.imgnumbers {
					margin: 0 25rpx;
					color: #333333;
					font-size: 28rpx;

					text {
						color: #999999;
						margin-left: 14rpx;
					}
				}
			}
		}

		.photos {
			display: flex;
			flex-direction: column;

			.photobox {
				margin-top: 10rpx;

				.video {
					width: 100%;
					height: 410rpx;
					border-radius: 5rpx;
				}

				.imgupdata {
					width: 100%;
					height: 410rpx;
					border: 2rpx solid #C1C1C1;
					border-radius: 4rpx;
					text-align: center;

					image {
						width: 66rpx;
						height: auto;
						margin: 150rpx auto 40rpx;
					}

					.text {
						width: 100%;
						text-align: center;
						font-size: 30rpx;
						color: #999999;
					}
				}
			}
		}

		._videos {
			margin-left: 26rpx;
			width: 469rpx;
			height: 297rpx;
			border-radius: 4rpx;
		}
	}

	.submitbox {
		padding: 49rpx 35rpx 49rpx 35rpx;
		padding: 49rpx 35rpx calc(env(safe-area-inset-bottom) + 49rpx) 35rpx;
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 10;

		.submittext {
			color: #999898;
			font-size: 26rpx;

			text {
				color: #38BE8C;
			}
		}

		.sbumitbtn {
			width: 680rpx;
			height: 90rpx;
			background: linear-gradient(86deg, #38BE8C, #05ADBB);
			border-radius: 45rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-size: 34rpx;
			font-weight: bold;
			margin-top: 40rpx;
		}
	}

	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba($color: #000000, $alpha: 0.5);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 70;

		.maskcontent {
			width: 456rpx;
			height: 438rpx;
			border-radius: 16rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			margin-bottom: 93rpx;
			align-items: center;
			justify-content: center;
			animation: popup 0.5s;

			@keyframes popup {
				0% {
					transform: scale(0.5);
				}

				50% {
					transform: scale(1.1);
				}

				100% {
					transform: scale(1);
				}
			}

			.masktitle {
				margin-top: 33rpx;
				color: #000000;
				font-size: 34rpx;
				font-weight: bold;
			}

			.maskmetions {
				width: 332rpx;
				margin-top: 48rpx;
				color: #999999;
				font-size: 28rpx;
				text-align: center;
			}

			.submitgo {
				margin-top: 54rpx;
				width: 303rpx;
				height: 66rpx;
				border-radius: 33rpx;
				text-align: center;
				line-height: 66rpx;
				background: #38BE8C;
				color: #FFFFFF;
				font-size: 30rpx;
			}

			.tomiao {
				margin-top: 29rpx;
				color: #666666;
				font-size: 30rpx;
			}
		}
	}
</style>
